<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>影院票务管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/normalize.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/dianyingxiangqing.css">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/front/style/IMG/Blogo.png" type="image/x-icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/layui/css/layui.css" media="all">
    <style>
        /*设置编辑框高度*/
        .w-e-text-container{
            height: 150px/* !important*/;

        }
        #wangEditor{
            width:650px;

        }
        .w-e-toolbar,w-e-text{
            width:720px;

        }
        #contentDiv{
            width:720px;

        }
    </style>


    <!-- 引入wangEditor插件 -->
    <script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
</head>

<script src="${pageContext.request.contextPath}/front/style/JS/jquery-1.11.0.min.js"></script>




<body>
<!-- 顶部 -->
<header class="dingbu">
    <nav>
        <a href="#" class="logo"></a>
        <ul class="navbar">
            <li>
                <a href="${pageContext.request.contextPath}/front/index.jsp">首页</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/movie.jsp">电影</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/filmRank.jsp">排行榜</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/screening.jsp">场次安排</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/vipRecharge.jsp">会员卡</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/userOrders.jsp">个人信息</a>
            </li>
        </ul>

        <div class="sousuo">
        </div>
        <div class="denglu bian">
            <a href="#" id="userInfo">
                <img src="${pageContext.request.contextPath}/front/style/IMG/avatar.png" alt="">
            </a>
            <span class="sanjiao"></span>
            <div>
                <a id="showStatus" href="${pageContext.request.contextPath}/front/accountLogin.jsp">登录</a>
            </div>
        </div>
    </nav>
</header>
<!-- 详情头 -->
<article class="xiangding">
    <div class="beijing1">
        <div class="beijing1_1">
            <div>
                <i></i>
                <a href="#" id="test">
                    <img id="filmCover" src="#" alt="">
                </a>
            </div>
            <div>

            </div>
        </div>
        <div class="beijing1_2">
            <div class="beijing1_2_1">
                <ul>
                    <li>
                        <h3 id="filmName">电影名称</h3>
                    </li>
                    <li>
                        <p id="actor">
                            演员名称
                        </p>
                    </li>
                    <li>
                        <p id="filmType">
                            分类名称
                        </p>
                    </li>
                    <li>
                        <p id="filmRunTime">
                            播放时长
                        </p>
                    </li>
                    <li>
                        <p id="filmReleaseTime">上映时间</p>
                    </li>
                </ul>
            </div>
            <div class="beijing1_2_2">
                <div class="beijing1_2_2_1">
                    <a href="#video">
                        <span>预告片</span>
                    </a>
                </div>
                <div class="beijing1_2_2_2">
                    <a href="#film_commit">
                        <i></i>
                        <span>评分</span>
                    </a>
                </div>
                <div class="beijing1_2_2_3">
                    <a href="#" id="buy">购票</a>
                </div>
            </div>
        </div>
        <div class="beijing1_3">
            <div class="beijing1_3_1">
                <p class="beijing1_3_11">用户评分</p>
                <div class="beijing1_3_1_2">
                    <div class="beijing1_3_1_21">
                        <span id="score">9.3</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
<!-- 内容部分 -->
<div class="content">
    <article>
        <div class="content_L1">
            <section class="content_L1_1">
                <ul>
                    <li>
                        <input type="radio" id="jieshao" name="lei" checked>
                        <label for="jieshao">
                            <a href="#film_info">介绍</a>
                        </label>
                        <input type="radio" id="jiangxiang" name="lei">
                        <label for="jiangxiang">
                            <a href="#video">预告片</a>
                        </label>
                        <input type="radio" id="tuji" name="lei">
                        <label for="tuji">
                            <a href="#film_commit">评论</a>
                        </label>
                    </li>
                </ul>
            </section>
        </div>
        <div class="content_L2" id="film_info">
            <h3>剧情简介</h3>
            <p id="filmContent"></p>
        </div>
        <div class="content_L2">
            <h3>预告片</h3>
            <video id="video" src="#"  controls="controls"></video>

        </div>
        <hr/>
        <%--富文本框 发布评论--%>
        <div id="wangEditor" style="display: none">
            <form id="form" method="post" >
                <div id="contentDiv" style="width: 700px;"></div>
                <textarea name="content" id="content" style="display:none" ></textarea>
            </form>

            打分：<input id="recomentScore" class="layui-input" type="number" min="1" max="10"  placeholder="评论必填 例如 3">
            <button id="btn1" class="layui-btn">发布评论</button>
            <button id="btn2" class="layui-btn">确认回复</button>

        </div>
        <script>
            var E = window.wangEditor;
            var editor = new E('#contentDiv')
            var $text1 = $('#content');
            editor.customConfig.onchange = function (html) {
                // 监控变化，同步更新富文本内容到 textarea
                $text1.val(html);
            }
            editor.customConfig.uploadImgServer = '/index/public/upload?type=imgFile';	//自定义上传图片（改成自己写的图片上传方法的路径）
            editor.customConfig.uploadFileName = 'imgFile';	//自定义文件名
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    var url = result.url
                    insertImg(url)
                }
            }
            editor.customConfig.customAlert = function (info) {	//关闭默认提示信息
                // info 是需要提示的内容
                //alert('自定义提示：' + info)
            }
            // 或者 var editor = new E( document.getElementById('content') )
            editor.create();
            $text1.val(editor.txt.html());

            // 对按钮做事件 添加评论
            //点击 向数据库中添加评论 并查询所有评论渲染
            $('#btn1').click(function(){
                var commentsContent= editor.txt.html();
                var commentsScore = $("#recomentScore").val();
                <%--var filmId = ${param.filmId};--%>
                var filmId="${param.filmId}";
                var  useId = "${sessionScope.account.accountId}";
                if(commentsContent.trim().length>11&&""!=commentsScore){
                    $.ajax({
                        async:true,
                        url:"${pageContext.request.contextPath}/commentAdmin/rootCommentsAdd",
                        type:"GET",
                        data:{useId:useId,commentsContent:commentsContent,commentsScore:commentsScore,filmId:filmId},
                        dataType:"json",
                        success:function(rs,status,xhr){

                            if(rs==1){
                                $("#commentList").empty();//清空评论
                                // //重新渲染
                                showRoCom();
                            }else{
                                alert("请购买后评论");
                            }


                        },
                        error:function(xhr,status,error){
                            //alert("ajax异步请求失败");
                            alert("评论内容长度不够或者评分格式不正确");
                        }
                    })
                }else {
                    alert("评论内容长度不够 ，评分没填或格式错误")
                }




            })

            // 以上添加评论
            $(document).ready(function () {
                showRoCom();

            })
            function showRoCom(){
                //已进入movieDetial.jsp页面，就开始渲染这个电影的评论
                <%--var filmId = ${param.filmId};--%>
                var filmId="${param.filmId}";
                var commendsId  ;
                $.ajax({
                    async:true,
                    type:"GET",
                    url:"${pageContext.request.contextPath}/commentAdmin/commentSelect/"+filmId,
                    data:{
                    },
                    dataType:"json",
                    success:function (result) {
                        var commentList = "";
                        $.each(result,function (index,comment) {
                            commentList += "<li>\n" +
                                "                        <div class=\"content_L5_2_1\">\n" +
                                "                            <img src=\"${pageContext.request.contextPath}/download/img?fileName="+comment.account.accountPicture+">\" alt=\"\">\n" +
                                "                            <i class=\"v1\"></i>\n" +
                                "                        </div>\n" +
                                "                        <div class=\"content_L5_2_2 integer\">\n" +
                                "                            <div class=\"content_L5_2_2_1\">\n" +
                                "                                <span class=\"content_L5_2_2_11 rootComUseName\" data-acc=\"+comment.account.accountName+\">"+comment.account.accountName+"</span>\n" +
                                "                                <span class=\"content_L5_2_2_12\">购</span>\n" +
                                "                            </div>\n" +
                                "                            <div class=\"content_L5_2_2_2\">\n" +
                                "                                <div>\n" +
                                "                                    <span>"+comment.commentsTime+"</span>\n" +
                                "                                    <i class=\"xin5\"></i>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"score\">\n" +
                                "                                    <span>评分："+comment.commentsScore+"</span><button  class=\"selectReply\" data-commentid=\""+comment.commentsId+"\">查看回复</button>\n" +
                                "                               <button class=\"replyRoot\" data-commentid=\""+comment.commentsId+"\" data-commentuserid=\""+comment.account.accountId+"\">回复这个人</button> </div>\n" +
                                "                            </div>\n" +
                                "                            <p>"+comment.commentsContent+"</p>\n" +
                                "                        </div>\n" +
                                "                    </li>";
                            commendsId = comment.commentsId;


                        })
                        $("#commentList").append(commentList);

                    },
                    error:function() {
                        alert("异步请求失败!");
                    }

                })
            }
            $(document).on("click",".selectReply",function () {
                var commendsId = $(this).data("commentid");
                var rootComUseName =  $(this).parents("li").find(".rootComUseName").text()
                var obj = $(this);
                var str = $(this).text();
                // alert(str);
                if("查看回复"==str){
                    //拼接二级评论 发送
                    $.ajax({
                        async:true,
                        url:"${pageContext.request.contextPath}/replyCommentAdmin/replyCommentSelect/"+commendsId,
                        type:"GET",
                        data:{},
                        dataType:"json",//发送ajax，返回子评论列表
                        success:function(result,status,xhr){
                            var replyComlist = "";
                            $.each(result,function (index,reply) {
                                var name =reply.account.accountName;
                                replyComlist += "<li class=\"rep "+commendsId+"\" style=\"font-size:10px;\">\n" +
                                    "                        <div class=\"content_L5_2_1\">\n" +
                                    "                            <img src=\"<%--${pageContext.request.contextPath}/download/img?fileName="+reply.account.accountPicture+"--%>\" alt=\"\">\n" +
                                    "                            <i class=\"v1\"></i>\n" +
                                    "                        </div>\n" +
                                    "                        <div class=\"content_L5_2_2\">\n" +
                                    "                            <div class=\"content_L5_2_2_1\">\n" +
                                    "                                <span class=\"content_L5_2_2_11\" style=\"font-size:8px;\">"+name+"</span>\n" +
                                    "                                <span class=\"content_L5_2_2_12\">购</span>\n" +
                                    "                            </div>\n" +
                                    "                            <div class=\"content_L5_2_2_2\">\n" +
                                    "                                <div>\n" +
                                    "                                    <span style=\"font-size:8px;\">"+reply.replyTime+"</span>\n" +
                                    "                                    <i class=\"\">回复@"+rootComUseName+"</i>\n" +
                                    "                                </div>\n" +
                                    "                            </div>\n" +
                                    "                            <p style=\"font-size:8px;\">"+reply.replyContent+"</p>\n" +
                                    "                        </div>\n" +
                                    "                    </li>";
                            })
                            obj.text("收起回复")
                            obj.parents("li").after(replyComlist);
                        },
                        error:function(xhr,status,error){
                            alert("ajax异步请求失败");
                        }

                    });
                    //拼接二级评论 发送
                }else{
                    $("."+commendsId).remove();
                    $(this).text("查看回复");

                }


            })

        </script>




        <div class="content_L5">
            <div class="content_L5_1">
                <h3 id="film_commit">热门短评</h3>
                <div class="content_L5_11">
                    <a href="#writeComments" id="writeComments">写短评</a>
                </div>
            </div>
            <div class="content_L5_2">
                <ul id="commentList">
                </ul>
            </div>
        </div>
    </article>
</div>
</body>
<!-- author 周文涛 2020年7月25日00:21:24-->

<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['table'], function(){
        var $ = layui.$;
        var accountId = "${sessionScope.account.accountId}";
        $("#buy").click(function(){
            if(accountId != ""){
                layer.open({
                    type: 1
                    ,title:$("#filmName").html()+" :选择场次"
                    ,content:$("#screening_table")
                    ,area: ['325px', '400px']
                    ,btn: ['确定', '取消']
                });
            }else{
                layer.msg("请登录");
            }
        });
        // 获取电影编号
        var filmId = "${param.filmId}";
        // 先假设一个电影id
        if(filmId == ""){
            layer.confirm("电影编号为空");
        }
        var fileCover;
      $.ajax({
            url:"${pageContext.request.contextPath}/front/film/"+filmId
            ,success:function(result){
                $("#filmCover").prop("src","${pageContext.request.contextPath}/download/img?fileName="+result.filmCover);
                fileCover = result.filmCover;
                // 电影名称
                $("#filmName").html(result.filmName);
                // 分类
                let filmType = "";
                $.each(result.filmTypes,function(index,val){
                    filmType += val.filmTypeName+"    "
                });
                $("#filmType").html(filmType);
                // 时长
                $("#filmRunTime").html("时长："+result.filmRunTime);
                // 上映时间
                $("#filmReleaseTime").html("上映时间："+result.filmReleaseTime);
                // 用户评分num.toFixed(1)
                if(result.score == "暂无分数"){
                    $("#score").html(result.score);
                }else{
                    $("#score").html(result.score.toFixed(1));
                }

                // 封面地址
                // 电影介绍
                $("#filmContent").html(result.filmContent);
                // 演员
                let actor = "";
                $.each(result.actors,function(index,val){
                    actor += val.actorName+"    "
                });
                $("#actor").html(actor);
                // 预告片地址
                // 所有场次
                $.each(result.screenings,function(index,val){
                    let html = "<tr><td data-screeningid='"+val.screeningId+"' class=\"screening_select layui-btn layui-btn-danger\" width=\"315px\">时间："+val.screeningStartTime+" 价格："+val.screeningPrice+"￥</td></tr>\n";
                    $("#screening_table").append(html);
                });
            }
            ,error:function(){}

        });
        // 预告片
        var video;
        $.ajax({
            url:"${pageContext.request.contextPath}/front/film/"+filmId
            ,success:function(result){
                $("#video").prop("src","${pageContext.request.contextPath}/download/video?fileName="+result.filmPrevue);
                video = result.filmPrevue;
            }
            ,error:function(){}
        });

        $(document).on("click",".screening_select",function(){
            let screeningId = $(this).data("screeningid");
            layer.closeAll();
            layer.open({
                type: 2
                ,title:"选座"
                ,content:"${pageContext.request.contextPath}/front/seat.jsp?screeningId="+screeningId
                ,area: ['650px', '720px']
                ,btn: ['确定', '取消']
            });
        });

        $("#test").click(function(){
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                content:"<img src='${pageContext.request.contextPath}/download/img?fileName="+fileCover+"' />"
            });
        });

        $("#writeComments").click(function(){
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                area:["750px","500px"],
                content:$("#wangEditor")
            });
        });

        var rootCommentId;
        var rootcommentuserid;
        $(".replyRoot").click(function(){
            rootCommentId = $(this).data("commentid");
            rootcommentuserid = $(this).data("commentuserid");
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                area:["750px","500px"],
                content:$("#wangEditor")
            });
        });

        $("#btn1,#btn2").click(function(){
            layer.closeAll();
        });


        //回复根评论
        $(document).on("click","#btn2",function () {
            var replyCommentsContent= editor.txt.html();
            var replyUserId = "${sessionScope.account.accountId}";
            //因为本来有默认长度
            if(replyUserId != ""){
                if(replyCommentsContent.trim().length>11){
                    $.ajax({
                        async:true,
                        url:"${pageContext.request.contextPath}/replyCommentAdmin/replyRootComment",
                        type:"GET",
                        data:{replyCommentsContent:replyCommentsContent,rootCommentId:rootCommentId,rootcommentuserid:rootcommentuserid,replyUserId:replyUserId},
                        dataType:"json",
                        success:function(rs,status,xhr){
                            alert("回复成功，点击查看回复，进行查看，");

                        },
                        error:function(xhr,status,error){
                            alert("ajax异步请求失败");

                        }
                    })
                }else {
                    alert("回复内容长度不够")
                }
            }else {
                alert("请登录后回复");
            }



        })



    });
</script>
<table class="layui-table" id="screening_table" style="display:none">
</table>
<script type="text/javascript">
    // 判断是否登录
    var account = "${sessionScope.account}";
    if(account != ""){
        $(".denglu img").prop("src","${pageContext.request.contextPath}/download/img?fileName=${sessionScope.account.accountPicture}");
        $("#showStatus").text("退出登录");
        $("#showStatus").prop("src","#");
    }
    $(document).on("click","#showStatus",function(){
        if($(this).text()=="退出登录"){
            $.ajax({
                url:"${pageContext.request.contextPath}/front/logout",
                success:function(){
                    console.log("退出成功");
                },
                error:function(){
                    console.log("退出失败");
                }
            });
        }
    })

</script>
</html>